<template>
    <div class="system-file-dialog">
        <div class="system-file-tools">
            <bi-button :disabled="pathList.length==0" @click="goBack" class="tool-btn" type="light">
                <bi-icon data="fa-arrow-left"  />
            </bi-button>
            <div class="path-box border ">
                <div class="path-item btn" @click="goRoot()" ><bi-icon :data="rootIcon"   /></div>
                <template v-for="(item,index) in pathList">
                    <div class="path-dot"><bi-icon data="fa-angle-right"  /></div>
                    <div class="path-item btn" @click="pathClick(index)" >
                        {{item}}
                    </div>
                </template>
            </div>
        </div>
        <div class="system-file-content" >
            <div class="list-content">
                <div class="list-item" :class="value==item?'checked':''" v-for="item in list" :key="item.name" @dblclick="selectFile(item,true)"  @click="selectFile(item)" >
                    <div class="icon"><bi-icon class="list-item-icon" :data="item.icon"  ></bi-icon></div>
                    <div class="title">{{item.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getIcon,isImage} from '../../bi-plug/file.js';
export default{
    dialog:{
        title:'系统文件',
        width:800,
    },
    data(){
        return {
            list:[],
            loading:false,
            pathList:[],
            page:1,
            size:10,
            value:undefined,
            search:{
                keyword:''
            }
        }
    },
    props:{
        ext:{
            type:[String,Array],
            default:"*"
        },
        root:{
            type:String,
            default:'/'
        },
        path:{
            type:String,
            default:''
        },
        system:{
            type:Boolean,
            default:false
        },
        rootIcon:{
            type:String,
            default:'fa-home'
        },
        multiple:{
            type:Boolean,
            default:false
        },
        folder:{
            type:Boolean,
            default:false
        },
        file:{
            type:Boolean,
            default:true
        }
    },
    methods:{
        getList(page){
            this.loading = true;
            this.list = [];
            this.value = undefined;
            let type  = '';
            if (this.folder){
                type = 'folder';
            }else if (this.file){
                type = 'file';
            }else{
                type = 'all';
            }

            let path = this.root=='/'?this.root : this.root + '/';
            
            if (this.pathList.length>0){
                path += this.pathList.join('/');
            }

            this.$ajax({
                url:this.$url({app:'admin',controller:'file',action:'systemFile'}),
                data:{
                    page,
                    type,
                    path,
                    ext:this.ext,
                    system:this.systemm,
                    ...this.search
                },
                success:(res)=>{
                    res.forEach(element => {

                        if (element.type=='folder'){
                            element.icon = 'fa-folder';
                        }else{
                            
                            element.icon = getIcon(element.name);
                            
                        }

                        this.list.push(element);
                    });
                }
            })
        },
        selectFile(item,open){
            
            this.value = item;
            if (open){
                if (item.type=='folder'){
                    this.pathList.push(item.name);
                    this.getList(1);
                }

                if (item.type=='file'){
                    this.dialogOk();
                }
            }
        },
        goBack(){
            if (this.pathList.length>0){
                this.pathList.pop();
                this.getList(1);
            }
        },
        goRoot(){
            this.pathList = [];
            this.getList(1);
        },
        pathClick(index){
            
            this.pathList.splice(index+1);
            this.getList(1);
            
        },
        dialogOk(){
            let value = {};
            if (this.folder && this.value == undefined){
                
                    let file   = this.pathList.join('/');
                    value.name = this.pathList.length>1?this.pathList.pop():'';
                    value.file = file;
                    value.path = this.pathList.join('/');
             
            }else{
                if (this.value ==undefined) {
                    this.$alert('请选择文件或者文件夹');
                    return false;
                } 

                if (!this.folder && this.value.type=='folder'){
                    this.$alert('不能选择文件夹');
                    return false;
                }

                if (!this.file && this.value.type=='file'){
                    this.$alert('不能选择文件');
                    return false;
                }
               
                let path  = this.pathList.join('/');
            
                value = {...this.value};
                value.file = path=="" ? value.name: path + '/' + value.name;
                value.path = path;

                
            }
            

            
            value.root = this.root;

            this.dialog.callback(value);
            this.dialog.close();
        }
    },
    mounted(){
        this.getList(1);
    }
}
</script>


<style>
.system-file-tools{
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
   
}

.system-file-tools .btn{
    cursor: pointer;
    margin-right: 5px;
    min-width: 30px;
    max-height: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    padding:var(--bs-btn-padding-y) var(--bs-btn-padding-y);
}

.system-file-tools .tool-btn{
    --bs-btn-bg :transparent;
    --bs-btn-border-width:0;
}

.system-file-tools .btn:hover{
    background-color: #f5f5f5;
}

.system-file-tools .path-box{
    flex: 1;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius:3px;
}

.system-file-content{
    height: 400px;
    overflow-y: auto;
}

.system-file-content .list-content{
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    gap: 5px;
}

.system-file-content .list-content .list-item{
    width: 100px;
    text-align: center;
    padding-bottom: 5px;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
    cursor: pointer;
    border: 1px solid #FFF;
}

.system-file-content .list-content .list-item:hover{
    background-color: rgba(var(--bs-success-rgb),.1);
}

.system-file-content .list-content .list-item.checked{
    background-color: rgba(var(--bs-success-rgb),.1);
    border: 1px solid rgba(var(--bs-success-rgb),.2);
}

.system-file-content .list-content .list-item .icon{
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
}
.system-file-content .list-content .list-item .bi-icon{
    font-size: 30px;
}

.system-file-content .list-content .list-item .title{
    line-height: 20px;
    margin-top: 5px;
    width: 80px;
    text-align: center;
    font-size: 12px;
    word-wrap: break-word;
}
</style>